<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="status" @change="getList">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="0"> 待审核 </a-radio-button>
          <a-radio-button value="1"> 审核中 </a-radio-button>
          <a-radio-button value="2"> 已驳回 </a-radio-button>
          <a-radio-button value="3"> 已完成 </a-radio-button>
        </a-radio-group>

        <div>
          <a-button v-if="!hasChannel" type="primary" @click="$router.push('/setting/merchantIncomingParts/edit')"
            >+ 新增</a-button
          >
          <a-button v-else type="primary" @click="$router.push('/saasChannel/payIncoming/edit')">+ 新增</a-button>
        </div>
      </div>

      <a-table
        size="default"
        :columns="columns"
        :data-source="list"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.total,
          pageSize: this.pageSize,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
      >
        <template slot="status" slot-scope="status, scoped">
          <a-tag :color="getStatus(status)[1]" @click="see(scoped)">
            {{ status > 0 ? scoped.state_str + ',点击查看原因' : '提审失败，请重新提交' }}
          </a-tag>
        </template>
        <span slot="is_use" slot-scope="scope">
          {{ scope.state == 'APPLYMENT_STATE_FINISHED' && scope.is_use == 1 ? '已启用' : '未启用' }}
        </span>
        <span slot="action" slot-scope="text">
          <a-button
            :disabled="text.state != 'APPLYMENT_STATE_FINISHED' || text.is_use == 1"
            type="link"
            size="small"
            @click="toUse(text.id)"
            >使用</a-button
          >
          <a-divider type="vertical" style="margin: 0 1px" />
          <a-button
            v-if="text.status === '2' || text.status === '0'"
            type="link"
            size="small"
            @click="edit(text.id, '1')"
            >修改</a-button
          >
          <a-button v-else type="link" size="small" @click="edit(text.id, '2')">查看</a-button>
        </span>
      </a-table>

      <ContentDetails title="详情" ref="pop" @cancel="item = null">
        <div class="popContent" v-if="item" v-html="item"></div>
      </ContentDetails>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { merchantList, useMerchant } from '@/api/setting/merchant'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '申请编号',
    dataIndex: 'business_code',
  },
  {
    title: '商户号',
    dataIndex: 'sub_mch_id',
  },
  {
    title: '类型',
    dataIndex: 'type',
    scopedSlots: {
      customRender: 'type',
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '时间',
    dataIndex: 'updated_at',
    key: 'updated_at',
  },
  {
    title: '是否启用',
    scopedSlots: {
      customRender: 'is_use',
    },
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  components: {
    ContentDetails: () => import('@/components/tools/ContentDetail'),
  },

  data() {
    return {
      columns,
      status: '-1',
      list: [],
      item: null,
      hasChannel: false,
    }
  },

  computed: {
    getStatus() {
      return (status) => {
        let text,
          color = 'black'
        switch (status) {
          case '0':
            text = '待审核'
            color = '#2db7f5'
            break

          case '1':
            text = '审核中'
            color = '#2db7f5'
            break

          case '2':
            text = '已驳回'
            color = '#f00'
            break

          case '3':
            text = '已完成'
            color = '#87d068'
            break

          case '4':
            text = '待签约，点击签约'
            color = '#2db7f5'
            break
        }

        return [text, color]
      }
    },
  },

  methods: {
    getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { status } = this

      merchantList({
        status,
      }).then((res) => {
        if (res.code === 0) {
          this.list = res.data
        }
        hide()
      })
    },

    edit(id, type) {
      if (this.hasChannel) {
        this.$router.push({
          path: '/saasChannel/payIncoming/edit',
          query: { id, type },
        })
        return
      }

      this.$router.push({
        path: '/setting/merchantIncomingParts/edit',
        query: { id, type },
      })
    },

    see({ status, sign_url, refuse_desc }) {
      if (status === '4') {
        this.$refs.pop.visible = true
        this.item = sign_url
      }

      if (status === '2') {
        this.$refs.pop.visible = true
        this.item = refuse_desc
      }
    },
    // 点击使用
    toUse(id) {
      const that = this
      this.$confirm({
        title: '确认使用支付进件？',
        onOk() {
          useMerchant({ id }).then((res) => {
            if (res.code == 0) {
              that.getList()
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
  },

  mounted() {
    this.getList()

    if (this.$route.meta.hasChannel) {
      this.hasChannel = true
    }
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
.status {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }
  .gray {
    background-color: #c6c6c6;
  }
  .green {
    background-color: #65c817;
  }
  .red {
    background-color: #ff4d4f;
  }
  .orange {
    background-color: #faad14;
  }
}
.action {
  /deep/ .ant-divider {
    margin: 0;
  }
}
.qrBox {
  display: flex;
  .qrCode {
    width: 300px;
    height: 300px;
    padding: 20px;
    background-color: #fafafa;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
